<template>
  <div class="merchandise-management views-container">
    <div class="wlm-table liveWrap">
      <div>
        <div class="phoneMobile" v-if="formFormatData.formData.cover_img.length==0">
          <img src="@/assets/live_studio/phonehead.png" alt style="width:100%" />
          <div class="phoneIcon">
            <div class>
              <img src="@/assets/live_studio/3.png" alt style="width:30px" />
            </div>
            <div class>
              <img src="@/assets/live_studio/1.png" alt style="width:30px" />
            </div>
            <div class>
              <img src="@/assets/live_studio/2.png" alt style="width:30px" />
            </div>
          </div>
        </div>
        <div
          class="phoneMobile"
          v-else
          :style="{background: 'url( '+ formFormatData.formData.cover_img[0].file_path +')'}"
        >
          <img src="@/assets/live_studio/phonehead.png" alt style="width:100%" />
          <div class="phoneIcon">
            <div class>
              <img src="@/assets/live_studio/3.png" alt style="width:30px" />
            </div>
            <div class>
              <img src="@/assets/live_studio/1.png" alt style="width:30px" />
            </div>
            <div class>
              <img src="@/assets/live_studio/2.png" alt style="width:30px" />
            </div>
          </div>
        </div>

        <div class="phoneTitle">
          <span class>直播间客户端模板</span>
        </div>
      </div>

      <div class="formRight">
        <el-form
          ref="form"
          :model="formFormatData.formData"
          :rules="formFormatData.rules"
          size="small"
          label-width="100px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="标题">
            <el-input v-model="formFormatData.formData.name"></el-input>
            <div class>最短三个汉字，最长17个汉字，一个汉字相当于两个字符；不能为纯数字。</div>
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="formFormatData.formData.sub_title"></el-input>
          </el-form-item>

          <el-form-item label="关联商家" prop="bus_id">
            <el-select
              filterable
              v-model="formFormatData.formData.bus_id"
              placeholder="请选择或输入关键词搜索"
              @change="selectChanged"
            >
              <el-option
                v-for="item in shopData"
                :disabled="item.storenum==0"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-input v-model="formFormatData.formData.labels"></el-input>
            <div class>多个标签请用英文“,”隔开</div>
          </el-form-item>
          <el-form-item label="直播间封面" ref="evaluation">
            <div class v-if="showImg">
              <img
                :src="formFormatData.formData.cover_img[0].file_path"
                style="width: 100px; height: 100px"
              />
            </div>
            <div v-else>
              <choose-files
                ref="chooseFiles"
                :config="chooseCoverConfig"
                :changeEvt="formFormatFiltersChange"
              ></choose-files>
              <div class="form-help">建议尺寸：1920×1080</div>
              <div class="form-help">图片大小不得超过3M</div>
            </div>
          </el-form-item>
          <el-form-item label="分享卡图片" ref="evaluation">
            <div class v-if="showImg">
              <img
                :src="formFormatData.formData.share_img[0].file_path"
                style="width: 100px; height: 100px"
              />
            </div>
            <div class v-else>
              <choose-files
                ref="chooseFiles"
                :config="chooseShareConfig"
                :changeEvt="formFormatFiltersChange"
              ></choose-files>
              <div class="form-help">建议尺寸：800×640</div>
              <div class="form-help">图片大小不得超过1M</div>
            </div>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-date-picker
              v-model="formFormatData.formData.live_time"
              type="datetimerange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
            <div class="form-help">
              直播计划开始时间（开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后,直播时间不能少于30分钟,
              <span style="color:red">最长时间不能超过12个小时</span>）
            </div>
          </el-form-item>
          <el-form-item label="主播昵称">
            <el-input v-model="formFormatData.formData.anchor_name"></el-input>
            <div class>
              <span>最短2个汉字，最长15个汉字，1个汉字相当于2个字符 </span>
            </div>
          </el-form-item>
          <el-form-item label="主播微信号">
            <el-input v-model="formFormatData.formData.anchor_wechat"></el-input>
            <div class>
              <span>仅用作为主播身份认证信息，不会在直播间显示，每个直播间可绑定一个。</span>
            </div>
          </el-form-item>

          <el-form-item label="直播商品" v-if="showLook">
            <div class="demo-image" style="display:flex;">
              <div
                class="block"
                v-for="fit in livegoods"
                :key="fit"
                style="text-align:center;margin-right:10px"
              >
                <p class="demonstration">{{ fit.name }}</p>
                <el-image style="width: 100px; height: 100px" :src="fit.cover_img" fit="contain"></el-image>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="允许评论">
            <el-radio-group v-model="formFormatData.formData.close_comment">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
            <span>（若关闭，直播开始后不允许开启）</span>
          </el-form-item>
          <el-form-item label="直播间类型">
            <el-radio-group v-model="formFormatData.formData.type">
              <el-radio :label="1">推流</el-radio>
              <el-radio :label="0">手机直播</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否关闭回放">
            <el-radio-group v-model="formFormatData.formData.close_replay">
              <el-radio :label="0">开启</el-radio>
              <el-radio :label="1">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="横屏、竖屏">
            <el-radio-group v-model="formFormatData.formData.screen_type">
              <el-radio :label="1">横屏</el-radio>
              <el-radio :label="0">竖屏</el-radio>
            </el-radio-group>
            <span>（横屏：视频宽高比为16:9、4:3、1.85:1 ；竖屏：视频宽高比为9:16、2:3）</span>
          </el-form-item>
          <el-form-item label="允许点赞">
            <el-radio-group v-model="formFormatData.formData.close_like">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
            <span>（若关闭，直播开始后不允许开启）</span>
          </el-form-item>
          <el-form-item label="开启货架">
            <el-radio-group v-model="formFormatData.formData.close_goods">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>（若关闭，直播开始后不允许开启）
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="showLook" @click="$router.back(-1)">返回</el-button>
            <el-button type="primary" @click="submintForm" :loading="loading" v-else>创建直播间</el-button>
          </el-form-item>
          <el-dialog :visible.sync="dialogVisible" width="50%" style=" text-align: center;">
            <!-- <repassword></repassword> -->
            <div class="qrWrap">
              <div class>
                <p>扫描二维码认证</p>
                <img :src="qrcode" style="width:200px;height:200px" />
              </div>
            </div>
            <span slot="footer" class="dialog-footer" style="text-align: center;">
              <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
            </span>
          </el-dialog>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "@/mixins/mixins";
import ChooseGoods from "@/components/ChooseGoods/index";
import ChooseFiles from "@/components/ChooseFiles/index";
import { createLive, getApplyInfo } from "@/api/setting";
import { getLiveInfo } from "@/api/upload";
import { shopIndex, businessIndex } from "@/api/merchant";
export default {
  mixins: [mixins.getters("Form")],
  mounted() {
    if (this.$route.query.type ) {
      this.showLook = true;
      getLiveInfo({ room_id: this.$route.query.id }).then((res) => {

        this.formFormatData.formData = res.data.data;
        this.showImg = true;
           console.log('wwwwwwwwwwwwwwwwwwww')
    console.log( this.formFormatData.formData)
        if (res.data.data.goods != null) {
          this.livegoods = JSON.parse(res.data.data.goods);
        }
      });
    }else if(this.$route.query.id){
      // console.log("111-------------1111")
      getApplyInfo({ id: this.$route.query.id }).then(res=>{

         this.formFormatData.formData = res.data.data;
          this.formFormatData.formData.cover_img=[]

      })
    }

  },
  data() {
    return {
      livegoods: [],
      loading: false,
      showLook: false,
      showImg: false,
      dialogVisible: false,
      qrcode: "",
      formFormatData: {
        key: "userForm",
        api: {
          editForm: {
         //   api: getApplyInfo,
            params: {
              id: "",
            },
            redirect: "id",
            filters: {
              img: {
                bindInit: ["chooseCoverConfig", "chooseShareConfig"],
              },
            },
          },
          submitForm: createLive,
        },

        formData: {
          share_img: [],
          cover_img: [],
          name: "",
          live_time: [],
          anchor_name: "",
          anchor_wechat: "",
          close_comment: 0,
          type: 1,
          close_replay: 0,
          screen_type: 0,
          close_like: 0,
          close_goods: 0,
          sub_title: "",
          labels: "",
          bus_id: [],
        },
        rules: {
          name: [
            { required: true, message: "请输入标签名称", trigger: "blur" },
          ],
        },
      },
      shopData: [],
      store_name: [],
      chooseCoverConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          isLocal: true,
          model: "display",
        },
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "cover_img",
          model: "img",
          validateField: "",
        },
      },
      chooseShareConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          isLocal: true,
          model: "display",
        },
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "share_img",
          model: "img",
          validateField: "",
        },
      },
    };
  },
  components: {
    ChooseGoods,
    ChooseFiles,
  },
  created() {
    this.shopDataGet();
    if (this.$route.query.buss_id) {
      shopIndex({ is_page: "2", bus_id: this.$route.query.buss_id }).then(
        (res) => {
          this.store_name = res.data.data;
        }
      );
    }
  },
  methods: {
    shopDataGet() {
      businessIndex({ list_rows: "all" }).then((response) => {
        const {
          data: { data: msgData = [] },
        } = response;
        this.shopData = msgData;
      });
    },
    selectChanged(value) {
      console.log("value", value);
      shopIndex({ is_page: "2", bus_id: value }).then((res) => {
        this.store_name = res.data.data;
        this.formFormatData.formData.store_id = "";
        console.log(" this.store_name", this.store_name);
        console.log("res", res);
      });
    },

    submintForm() {
      if (this.formFormatData.formData.name == "") {
        this.$message.error("请输入直播标题！");
        return;
      }
      if (this.formFormatData.formData.sub_title == "") {
        this.$message.error("请输入直播副标题！");
        return;
      }
      if (this.formFormatData.formData.bus_id == []) {
        this.$message.error("请选择关联商家！");
        return;
      }
      if (this.formFormatData.formData.labels == "") {
        this.$message.error("请输入直播标签！");
        return;
      }

      if (
        this.formFormatData.formData.cover_img == "" ||
        this.formFormatData.formData.cover_img == []
      ) {
        this.$message.error("请上传直播封面！");
        return;
      }
      // if (this.formFormatData.formData.share_img instanceof Array) {
      //   if (this.formFormatData.formData.share_img.length > 0) {
      //     this.formFormatData.formData.share_img = this.formFormatData.formData.share_img[0].file_path
      //   }
      // }
      if (
        this.formFormatData.formData.share_img == "" ||
        this.formFormatData.formData.share_img == []
      ) {
        this.$message.error("请上传分享图！");
        return;
      }

      const now = Date.now() + 600000;
      const sixMOuth = Date.now() + 15552000000;
      const livingTime =
        this.formFormatData.formData.live_time[1] -
        this.formFormatData.formData.live_time[0];
      if (this.formFormatData.formData.live_time.length == 0) {
        this.$message.error("请输入直播时间！");
        return;
      }
      if (this.formFormatData.formData.live_time[0] < now) {
        this.$message.error("直播时间需至少提前10分钟");
        return;
      } else if (this.formFormatData.formData.live_time[0] >= sixMOuth) {
        this.$message.error("开始时间不能在6个月以后");
        return;
      } else if (livingTime < 1800000) {
        this.$message.error("直播时间不能少于30分钟");
        return;
      }
      if (this.formFormatData.formData.anchor_name == "") {
        this.$message.error("请输入主播昵称！");
        return;
      }
      if (this.formFormatData.formData.anchor_wechat == "") {
        this.$message.error("请输入主播微信号！");
        return;
      }
      // if (this.formFormatData.formData.cover_img instanceof Array) {
      //   if (this.formFormatData.formData.cover_img.length > 0) {
      //     this.formFormatData.formData.cover_img = this.formFormatData.formData.cover_img[0].file_path
      //   }
      // }
      this.loading = true;

      createLive(this.formFormatData.formData).then((res) => {
        console.log(res);
        if (res.data.data.errcode == 300036) {
          this.loading = false;

          this.qrcode = res.data.data.qrcode_url;
          this.$message.error("直播未实名");
          this.dialogVisible = true;


          //                 this.$alert(`<img src="${res.data.data.qrcode_url}" >`,"扫描二维码实名", {
          //           dangerouslyUseHTMLString: true
          //         });
        } else {
          this.$router.push("/livetelecast/livetelecast");
        }
      }).catch(rej=>{
          this.loading = false;
      });
      // this.formFormatSubmit({
      //   router: {
      //     type: 'replace',
      //     path: '/livetelecast/livetelecast',
      //     code: 1
      //   }
      // })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
  handleChange(file, fileList) {
    this.fileList = fileList.slice(-3);
  },
};
</script>

<style lang="scss" scoped>
.liveWrap {
  display: flex;
}
.phoneMobile {
  width: 375px;
  height: 667px;
  background-size: cover !important;
  position: relative;
  border: 1px solid #b4b4b4;
  background-repeat: no-repeat;

	background-position: center;
}
.phoneTitle {
  text-align: center;
  margin-top: 20px;
}
.formRight {
  margin-left: 60px;
}

.phoneIcon {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.phoneIcon > div {
  margin-bottom: 20px;
}
</style>
